<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="预约详情" :border-bottom="false"></u-navbar>
		</view>
		<view class="statusBox container_br" v-if="orderInfo">
			<view class="status">
				<span v-if="orderInfo.check_status==0">预约中</span>
				<span v-if="orderInfo.check_status==1">预约成功</span>
				<span v-if="orderInfo.check_status==-1">预约失败</span>
			</view>
			<view class="time" v-if="orderInfo.is_buy==0">
				<view v-if="!open">支付时间为下午六点开始</view>
				<view v-else>
					<u-count-down :timestamp="returnTime(orderInfo)" format="DD天HH时mm分ss秒"></u-count-down>
				</view>
			</view>
			<view class="success" v-else>
				支付成功
			</view>
		</view>
		<view class="goodsInfo container_br">
			<view class="title">
				商品信息
			</view>
			<view class="goods" v-if="orderInfo.goods">
				<view class="top jsbc">
					<view class="left">
						<image :src="orderInfo.goods.images_format[0]" mode="widthFix" style="width: 220rpx;"></image>
					</view>
					<view class="right">
						<view class="name">
							{{orderInfo.goods.name}} {{orderInfo.skus_name?orderInfo.skus_name[0]:""}}
						</view>
						<view class="type_num jsbc">
							<view class="type">
								预约数量
							</view>
							<view class="num">
								X{{orderInfo.goods_number}}
							</view>
							<view class="type">
								中签数量
							</view>
							<view class="num">
								X{{orderInfo.obtained_number}}
							</view>
						</view>
						<view class="price">
							<view class="now_price">
								<span class="icon">￥</span>{{orderInfo.price}}
							</view>
							<view class="rprice">
								<span class="icon">预约价格￥</span> {{orderInfo.reservation_price}}
							</view>
						</view>

					</view>
				</view>
				<view class="bottom">
					<view class="totalPrice jsbc">
						<view class="priceTitle">
							商品总价
						</view>
						<view class="price">
							￥{{(orderInfo.reservation_price*orderInfo.goods_number).toFixed(2)}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="orderDetail container_br">
			<view class="title">
				订单信息
			</view>
			<view class="cell" @click="fz(orderInfo.order_no)">
				<span>订单编号：{{orderInfo.order_no}}</span>
				<u-icon class="ml2" name="bookmark" size="36" color="#333"></u-icon>
				<span>复制</span>
			</view>
			<view class="cell">
				下单时间：{{orderInfo.created_at}}
			</view>
			<view class="cell">
				支付时间：{{orderInfo.pay_time}}
			</view>

		</view>
		<view class="btns" v-if="open">
			<view class="sign pay btn" v-if="orderInfo.check_status=='1'&& orderInfo.is_buy =='0'"
				@click="gopay(orderInfo)">
				去支付
			</view>
		</view>
		<view class="btns" v-else>
			<view class="sign pay btn" v-if="orderInfo.check_status=='1'&& orderInfo.is_buy =='0'">
				未到支付时间
			</view>
		</view>
	</view>
</template>

<script>
	import {
		useCartStore
	} from '../../stores/cart'
	const add = useCartStore()
	import {
		getPlistDetail
	} from '@/api/index.js'
	import baseUrl from '@/config/config.js'
	import {
		toast,
		tiao,
		toastC,
		toastload,
		closeload,
		copy
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				order_number: "",
				orderInfo: "",
				open: false,
				addOrder: add

			};
		},
		onLoad(res) {
			const date = new Date();
			date.setHours(18, 0, 0, 0);
			// 每天下午的时间戳
			const timestamp = date.getTime();

			const cdate = Date.now()
			console.log("能不能支付", cdate, timestamp, cdate > timestamp);
			if (cdate > timestamp) {
				this.open = true
			} else {
				this.open = false
			}
			this.order_number = res.id
			this.init()
		},
		methods: {
			init() {
				toastload()
				getPlistDetail(this.order_number, {}).then(res => {
					console.log("订单详情", res);
					this.orderInfo = res.data
					if(!res.data){
						uni.showModal({
							title:"订单不存在",
							success(res) {
								uni.navigateBack()
							}
						})
					}
					if (res.data.goods_sku_id) {
						this.orderInfo = {
							...this.orderInfo,
							skus_name: this.orderInfo.goods.skus.list.map(e => {
								if (e.id == this.orderInfo.goods_sku_id) {
									return e.names[0]
								}
							})
						}
					}


					closeload()
				})
			},
			fz(ct) {
				copy(ct)
			},
			returnTime(item) {
				// 当前的时间戳
				const cDate = Date.now()
				const eDate = Date.parse(item.period_date)
				return eDate - cDate


			},
			signBtn(id) {
				signOrderBtn(id, {
					signing_status: "已签收"
				}).then(res => {
					if (res.result == 1) {
						toastC("签收成功")
					} else {
						toast("网络错误")
					}

				})
			},
			gopay(order) {
				this.addOrder.addOrder(order)
				setTimeout(() => {
					uni.redirectTo({
						url: '/page/orderConfirm/orderConfirm'
					})
				})
			}
		}

	}
</script>

<style lang="scss">
	.status {
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;

		.title {
			font-size: 42rpx;
			color: #333333;
			margin-bottom: 15rpx;
		}

	}

	.goodsInfo {
		.title {
			font-size: 30rpx;
			color: #333333;
		}

		.goods {
			margin-top: 2orpx;

			.left {
				height: 220rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.right {
				width: 420rpx;
				height: 220rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.right .type_num {
				font-size: 26rpx;
				color: #999999;
			}

			.right .name {
				width: 400rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.right .price {
				font-size: 36rpx;
				color: #FA453C;
			}

			.icon {
				font-size: 26rpx;
			}

			.bottom {
				padding: 15rpx 0;
				border-top: 1rpx solid #dedede;
				margin-top: 20rpx;
			}
		}
	}

	.orderDetail {
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
	}


	.btns {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 750rpx;
		padding: 15rpx 20rpx;
		border-top: 1rpx solid #dedede;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.btns .btn {
		min-width: 200rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1px solid #E6E6E6;
		text-align: center;
		line-height: 60rpx;
		margin: 0 10rpx;
	}

	.btns .pay {
		background: #FA453C;
		color: #FFFFFF;
	}

	.btns .cancel,
	.btns .relation,
	.btns .detail {
		font-size: 28rpx;
		color: #666666;
	}

	.btns .cui {
		border: 1px solid #f5ce31;
		color: #f5ce31;
	}

	.statusBox .status {
		font-size: 40rpx;
		font-weight: 700;
	}
</style>